<template>
	<view class="total-price">
		<text class="price-txt" v-if="txt">{{txt}}</text>
		<text :class="sizeClass[size]" :style="{color: color}">￥</text>
		<text :class="['big', sizeClass[size]]" :style="{color: color}">{{integer}}</text>
		<text :class="sizeClass[size]" :style="{color: color}">.{{decimals}}</text>
	</view>
</template>

<script setup>
	import { watch } from 'vue';
	const props = defineProps({
		price: {
			type: Number,
			default: 0
		},
		txt: {
			type: String,
			dafault: ''
		},
		color: {
			type: String,
			default: '#FC4951'
		},
		size: {
			type: String,
			default: 'big'
		}
	})
		
	const integer = ref(0); // 整数
	const decimals = ref('00'); // 小数
	const sizeClass = ref({
		'small': 'amount-small',
		'big': 'amount-big',
		'large': 'amount-large',
	})
	
	watch(price, (nVal, oVal) => {
		if (nVal || oVal > 0) {
			let price = (nVal / 100).toFixed(2);
			let priceArr = price.split('.');
			integer.value = priceArr[0];
			decimals.value = priceArr[1];
		}
	}, immediate)
</script>

<style lang="scss" scoped>
	.total-price {
		.price-txt {
			font-size: 24rpx;
			color: #2E2E2E;
		}
		.amount-big {
			font-size: 28rpx;
			&.big {
				font-size: 40rpx;
				font-weight: bold;
			}
		}
		.amount-small {
			font-size: 24rpx;
			&.big {
				font-size: 32rpx;
				font-weight: bold;
			}
		}
		.amount-large {
			font-size: 42rpx;
			&.big {
				font-size: 60rpx;
				font-weight: bold;
			}
		}
	}
</style>